<template>
	<!-- <page-meta :root-font-size="fontSize + 'px'"></page-meta> -->

	<view class="tabContent">
		<up-navbar title="模块" :fixed="false" :autoBack="false" leftIcon="" :safeAreaInsetTop="true">
		</up-navbar>

		<view class="flex-auto">
			<view class="commonPadding" style="background-color: #fff;">
				<up-swiper :list="list1" height="130px" :interval="6000" circular imgMode="scaleToFill">
				</up-swiper>
			</view>
			<up-sticky bgColor="#fff">
				<up-tabs lineColor="#51d0d0" :activeStyle="{
					color:'#51d0d0',
					fontWeight:'500',
					transform:'scale(1.05)'
					}" :list="moduleTypes" :current="currModuleType" @change="switchModuleType">
					<template #right>
						<view class="x-ec" style="padding-right: 5px;">
							<view class="f-dc tab-right-text">
								<text>是否自启</text>
								<text>历史模块</text>
							</view>

							<switch :checked="activeModuleStartType" @change="switchChange" color="#1cd842"
								style="zoom: 0.8;">
							</switch>
						</view>
					</template>
				</up-tabs>
			</up-sticky>
			<view class="common_Box">

				<view class="commonPadding">
					<view style="padding: 10px 10px;">
						<uni-row class="CommonBox" :gutter="20" v-if="currModules.length">
							<uni-col v-for="(module,index) in currModules" :key="index" :span="8" :xs="{span: 8}"
								:sm="{span: 4}" :lg="{span: 3}">
								<view class="CommonCard f-dc" @click="initModule(module)">
									<uni-icons fontFamily="CustomFontPlatform" class="icon"
										:color="module.Colour || '#51d0d0'"
										size="30rpx">{{uni.$utils.toUniCode(module.ImageUrl || '&#xe6e9;')}}
									</uni-icons>

									<view class="text">
										<text>{{module.ModuleName}}</text>
									</view>
								</view>
							</uni-col>
						</uni-row>

						<up-empty v-else mode="list" icon="/static/Image/Img/noMore.png" iconSize="120" text="已全部开通">
						</up-empty>
					</view>

				</view>


				<!-- <up-slider v-model="fontSize"></up-slider> -->
			</view>
		</view>

	</view>
</template>

<script setup lang="ts" name="Center">
	import { ref, computed } from 'vue';
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { useMainStore, useInventoryStore, useUserStore, usePermissionStore } from '@/store';
	const inventoryStore = useInventoryStore();
	const mainStore = useMainStore();
	const userStore = useUserStore();
	const permissionStore = usePermissionStore();
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, onAllComplete, onError } = useRequestQueue();


	let fontSize = ref<number>(10)


	const list1 = computed(() => {
		return [
			uni.$utils.getServerFile('/assets/static/image/Img/pp.png'),
			uni.$utils.getServerFile('/assets/static/image/Img/p1.png'),
			uni.$utils.getServerFile('/assets/static/image/Img/p2.png')
		]
	});

	let moduleTypes = ref<any>([]);
	let currModuleType = ref(0);

	const activeModuleStartType = computed<any>(() => {
		return permissionStore.activeModuleStartType;
	});

	function switchChange() {
		permissionStore.activeModuleStartType = !permissionStore.activeModuleStartType;
	}

	let currModules = ref<any>([]);

	async function initModule(module : any) {
		uni.$utils.showLoading('正在加载模块');

		const ret = await permissionStore.getAPPModulePages({ request, module }) as any;
		if (ret.status != 200) {
			return uni.$utils.hideLoading()
		}

		let path = '';
		console.log(module);
		permissionStore.activeModule = module;
		switch (module.ModuleID) {
			case 3: // qms
				uni.navigateTo({
					url: "/st_qms/basicPage/basicPage",
					success: (ret) => {
						uni.$utils.hideLoading()
					},
					fail(err) {
						uni.$utils.hideLoading()
					}
				})
				break;
			case 2:

				uni.navigateTo({
					url: "/st_ticket/basicPage/basicPage",
					success: (ret) => {
						uni.$utils.hideLoading()
					},
					fail(err) {
						uni.$utils.hideLoading()
					}
				});
				break;
			case 6:
			case 12:
			case 13:
				let homePage = module.authPages.find((item : any) => item.IsHomepage);
				if (homePage && homePage != undefined) {
					path = homePage.AP_Link; // 设置首页路径
					console.log(path);
					uni.navigateTo({
						url: path,
						success: (ret) => {
							uni.$utils.hideLoading()
						},
						fail(err) {
							uni.$utils.hideLoading()
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '当前应用未设置首页!'
					})
				}
				break;
			case 1:
				path = '/commonPage/Module/index' + '?moduleID=' + module.ModuleID + '&index=0';
				console.log(path);
				uni.navigateTo({
					url: path,
					success: (ret) => {
						uni.$utils.hideLoading()
					},
					fail(err) {
						uni.$utils.hideLoading()
					}
				})
				break;
			default:
				permissionStore.activeModule = {};
				uni.$utils.layer.alert("此功能暂未开通！")
				break;
		};

	}


	function organizeByTreeTypeName(arr : any, ds1Map : any) {
		// 创建一个映射来按TreeType分组数据  
		const groupedData : any = {};

		arr.forEach((item : any) => {
			const treeType = item.TreeType;
			const treeTypeName = item.TreeTypeName; // 用于分组的键  

			if (!(treeTypeName in groupedData)) {
				groupedData[treeTypeName] = {
					TreeType: treeType, // 保留TreeType  
					APPType: item.appType, // 保留APPType
					Node: [],
				};
			}

			// 检查ds1Map中是否有匹配的APPFunID  
			if (ds1Map.has(item.APPFunID)) {
				groupedData[treeTypeName].Node.push({
					...item,
					IconApprove: ds1Map.get(item.APPFunID), // 如果需要，直接添加IconApprove  
				});
			} else {
				groupedData[treeTypeName].Node.push({
					...item,
					IconApprove: []
				});
			}
		});

		// 提取分组后的数据为数组，并可能按某种逻辑排序（这里不排序，因为TreeTypeName已经是分组键）  
		const sortedData = Object.entries(groupedData).map(([treeTypeName, group] : any) => ({
			TreeTypeName: treeTypeName,
			...group, // 展开分组对象，它包含TreeType, APPType, APPFunID, 和 Node 数组  
		}));

		return sortedData;
	}

	const appModules = computed<any>(() => {
		return permissionStore.appModules;
	});
	console.log(appModules.value);

	function switchModuleType() {

	}

	let modules = ref<any>([]);
	let openModules = ref<any>([]);
	let closeModules = ref<any>([]);
	function initModuleTypes() {
		console.log(appModules.value);
		modules.value = appModules.value;
		if (uni.$utils.isEmpty(appModules.value)) {
			return;
		};
		console.log(modules.value);
		openModules.value = modules.value.filter((module : any) => module.Available == 1);
		closeModules.value = modules.value.filter((module : any) => module.Available == 0);
		console.log(closeModules.value);
		let openNums = openModules.value.length || 0;
		let closeNums = closeModules.value.length || 0;
		moduleTypes.value = [{
			name: '已开通',
			badge: {
				value: openNums
			}
		}, {
			name: '未开通',
			badge: {
				value: closeNums
			}
		}];
		currModules.value = openModules.value;
	}

	// onLoad((option : any) => {
	// console.log('测试onLoad');
	initModuleTypes();
	// });
</script>


<style lang="scss" scoped>
	$h-padding: 8px;
	$v-padding: 10px;
	$radius: 5px;
	$text-size: 24rpx;

	.commonPadding {
		padding: $v-padding $h-padding;

		.CommonCard {
			height: 140rpx;
			background-color: #fff;
			border-radius: 12px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 8px 0;
			margin-bottom: 10px;
			box-shadow: 1px 1px 7px -6px #bababa;
			position: relative;

			.icon {
				position: absolute;
				top: 5px;
				left: 10px;
			}

			.text {
				text-align: center;
				margin-top: 10px;
				font-size: $text-size;
				letter-spacing: 1px;
				text-shadow: 1px 1px 2px #fff, 2px 2px 2px #d8d8d8;
				color: #515151;
			}

			&:active {
				transform: scale(0.98);
				box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(81, 208, 208, 0.05);
				opacity: 0;
				transition: opacity 0.3s;
			}

			&:active::after {
				opacity: 1;
				border-radius: 12px;
			}
		}
	}

	.tab-right-text {
		min-width: 36px;
		font-size: $text-size;
		text-align: center;
		color: #999;
	}

	.tabContent {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #f8f8f8;
		// padding: $v-padding $h-padding;

		.common_Box {
			flex: 1;
			// overflow: auto;
			display: flex;
			flex-direction: column;
			// padding: $v-padding 0 0;
			margin-bottom: $v-padding;

			.u-tabs {
				padding-bottom: 5px;
			}

			.module {
				display: flex;
				justify-content: center;
				align-items: center;
				// height: 80px;
				background-color: #fff;
				padding: 10px;
				border-radius: 5px;
				margin-bottom: 10px;

				&-left {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
				}

				&-middle {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: flex-start;
					// max-height: 80px;
					overflow: hidden;
					flex: 1;

					&-title {
						display: flex;
						align-items: center;
						font-size: $text-size;
						font-weight: 500;
						min-height: 25px;
						line-height: 16px;
						padding: 0 5px;
						color: #044569;
					}

					&-subtitle {
						margin-top: 10rpx;
						padding: 0 5px;
						font-size: $text-size;
						// height: 55px;
						min-height: 100rpx;
						color: #999;
					}
				}

				&-right {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80px;
				}
			}

		}
	}
</style>